<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>数据可视化</title>
    <link href="css/tem.css" rel="stylesheet"/>
</head>
<body>
<!-- 头部的盒子 -->
<header>
    <!-- 添加图片 -->
    <img src="广投综合能源公司VI/07.横式_全称_白字白标透明底.png" alt="Logo" class="logo" />
    <h1>广西广投综合能源管理有限公司场站运行情况日报</h1>
    <div class="showTime"></div>
    <script>
        function time() {
            const dt = new Date();
            const y = dt.getFullYear();
            const mt = dt.getMonth() + 1;
            const day = dt.getDate();
            const h = dt.getHours();
            const m = dt.getMinutes();
            const s = dt.getSeconds();
            document.querySelector(".showTime").innerHTML =
                `当前时间：${y}年${mt}月${day}日${h}时${m}分${s}秒`;
        }
        setInterval(time, 1000); //设定定时器，循环运行
        time(); //立即运行一次以显示当前时间
    </script>
</header>


<section class="mainBox">
    <div class="column">
        <div class="panel">

            <div class="no">
                <div class="no-bd">
                    <ul>
                        <li>项目名称</li>
                        <li>装机容量（MWp）</li>
                        <li>昨日发电量（万kW.h）</li>
                        <li>当月累计发电量（万kW.h）</li>
                        <li>当年累计发电量（万kW.h）</li>
                        <li>历年累计发电量（万kW.h）</li>
                        <li>当日等效利用小时数</li>
                    </ul>
                </div>
                <div class="no-hd" id="data-container">
                    <!-- 动态内容将插入到这里 -->
                </div>
            </div>
            <script src="./js/data.js"></script>
            <div class="panel-footer"></div>
        </div>

        <div class="panel zhe">

            <div class="no">
                <div class="no-bd">
                    <ul>
                        <li>充电站名</li>
                        <li>订单量</li>
                        <li>总用电量(kwh)</li>
                        <li>订单金额(元)</li>
                        <li>订单服务费(元)</li>
                        <li>充电时长(h)</li>
                    </ul>
                </div>
                <div class="no-hd" id="ele_data-container">
                    <!-- 动态内容将插入到这里 -->
                </div>
            </div>
            <script src="./js/ele_station_yes.js"></script>
            <div class="panel-footer"></div>
        </div>

    </div>

    <div class="column">
        <div class="panel bar">
            <h2>光伏电站昨日发电量</h2>
            <div class="chart"></div>
<!--            <div class="chart" style="background-color: pink"></div>-->
            <div class="panel-footer"></div>
        </div>
        <div class="panel line">
            <h2>昨日充电站充电情况</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
</section>


<script src="./js/flexible.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/jquery.js"></script>
<script src="./js/index.js"></script>
</body>
</html>